@import url('./style');
#contact-form{
  >div{
    border: 1px solid #eee;
    .form-box{
      width: 85%;
      margin: auto;
      padding: 10 * @px1 0;
      table{
        tr{
          td{
            vertical-align: top;
            padding-top: 10 * @px1;
          }
          td.key{
            text-align: right;
            padding-right: 10 * @px1;
            p{
              position: relative;
              white-space: nowrap;
              font-size: 14 * @px1;
              padding-top: 8 * @px1;
              color: #666666;
              display: inline-block;
              i{
                position: absolute;
                color: #ff1800;
                display: block;
                font-size: 16 * @px1;
                left: -10 * @px1;
                top: 50%;
                margin-top: 8 * @px1;
                transform: translateY(-50%);
              }
            }
          }
          td.val{
            width: 100%;
            p{
              color: red;
              font-size: 12 * @px1;
              line-height: 1;
              padding-top: 10 * @px1;
            }
            textarea,
            input{
              width: 100%;
              border: 1px solid #eeeeee;
              font-size: 14 * @px1;
              padding: 5 * @px1;
              display: block;
              resize: none;
            }
            textarea{
              height: 150 * @px1;
            }
            input{
              width: 50%;
            }
          }
        }
        tr.code-box{
          display: none;
        }
      }
      .btn-box{
        padding-left: 20 * @px1;
        padding-top: 40 * @px1;
        padding-bottom: 10 * @px1;
        font-size: 0;
        p{
          display: inline-block;
          color: white;
          font-size: 16 * @px1;
          line-height: 1;
          padding: 10 * @px1 30 * @px1;
          background-color: @systemColor;
          cursor: pointer;
        }
        p:hover{
          background-color: #91241e;
        }
      }
    }
  }
}

@media (max-width: 800px) {
  #contact-form{
    >div{
      border: none;
      .form-box{
        padding-top: 30 * @px1;
        width: 100%;
        table{
          tr{
            td{
            }
            td.key{
              position: relative;
              padding: 0;
              p{
                position: absolute;
                top: 0;
                transform: translateY(-25 * @px1);
                i{
                  right: -10 * @px1;
                }
              }
            }
            td.val{
              padding-bottom: 40 * @px1;
              input{
                width: 100%;
              }
            }
          }
          tr.code-box{
            display: contents;
            td.val{
              position: relative;
              padding-right: 100 * @px1;
              input{
                width: 90%;
              }
              .img-box{
                position: absolute;
                padding-top: 10 * @px1;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
                >div{
                  position: relative;
                  padding-right: 20 * @px1;
                  img{
                    display: block;
                  }
                  i{
                    position: absolute;
                    display: block;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 0;
                    color: #666666;
                    font-size: 18 * @px1;
                    line-height: 1;
                  }
                }
              }
            }
          }
          tr:last-child{
            td.val{
              padding-bottom: 0;
            }
          }
        }
        .btn-box{
          padding-top: 30 * @px1;
          padding-left: 0;
          p{
            display: block;
            text-align: center;
            border-radius: 5 * @px1;
          }
        }
      }
    }
  }
}